import 'package:flutter/material.dart';
import 'package:flutter_common_app/pages/song_calendar/song_calendar_tab_view.dart';
import 'package:flutter_common_app/utils/common_util/date_util.dart';
import 'package:flutter_common_app/widgets/app_bar/custom_gradient_app_bar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class SongCalendarDetailPage extends StatefulWidget {
  @override
  _SongCalendarDetailPageState createState() => _SongCalendarDetailPageState();
}

class _SongCalendarDetailPageState extends State<SongCalendarDetailPage>
    with SingleTickerProviderStateMixin {
  List<DateTime> tabBarTitleList = [];
  List<Widget> tabView = [];
  int currentIndex;
  TabController tabController;

  DateTime nowTime = DateTime.now();

  @override
  void initState() {
    DateTime startTime = DateTime(nowTime.year, nowTime.month - 2, 1);
    int length = 5;
    for (var i = 0; i < length; i++) {
      if (length - 1 != i) {
        tabBarTitleList.add(DateTime(startTime.year, startTime.month + i, 1));
      } else {
        //当前月份的最后一天
        DateTime time = DateTime(startTime.year, startTime.month + i + 1, 1);
        int nextTimeStamp = time.millisecondsSinceEpoch - 24 * 60 * 60 * 1000;
        tabBarTitleList.add(DateTime.fromMillisecondsSinceEpoch(nextTimeStamp));
      }
    }
    currentIndex = tabBarTitleList.indexWhere((item) =>
        DateUtil.formatDate(nowTime, format: DateFormats.y_mo) ==
        DateUtil.formatDate(item, format: DateFormats.y_mo));
    if (mounted) setState(() {});

    tabController = TabController(
        length: tabBarTitleList.length,
        initialIndex: currentIndex,
        vsync: this);

    tabController.addListener(() {
      if (tabController.index.toDouble() == tabController.animation.value) {
        setState(() {
          currentIndex = tabController.index;
        });
      }
    });

    super.initState();
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(245, 245, 245, 1),
      appBar: CustomGradientAppBar(
        Text(
          '音乐日历',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        gradient: LinearGradient(
          colors: [
            Color.fromRGBO(236, 102, 84, 1),
            Color.fromRGBO(234, 60, 42, 1),
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
        leading: BackButton(
          color: Colors.white,
        ),
      ),
      body: Column(
        children: [
          buildTabBar(),
          Expanded(
            child: TabBarView(
              controller: tabController,
              children: tabBarTitleList.map((e) {
                return SongCalendarTabView(e);
              }).toList(),
            ),
          ),
        ],
      ),
    );
  }

  Widget buildTabBar() {
    return Container(
      width: 750.w,
      height: 70.w,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color.fromRGBO(236, 102, 84, 1),
            Color.fromRGBO(234, 60, 42, 1),
          ],
          begin: Alignment.centerLeft,
          end: Alignment.centerRight,
        ),
      ),
      child: ListView.builder(
        shrinkWrap: true,
        primary: false,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () {
              tabController.index = index;
            },
            child: Container(
              alignment: Alignment.topCenter,
              width: 750.w / tabBarTitleList.length,
              child: buildTabBarItem(index),
            ),
          );
        },
        itemCount: tabBarTitleList.length,
      ),
    );
  }

  Widget buildTabBarItem(index) {
    bool status = currentIndex == index;
    return Text(
      DateUtil.formatDate(tabBarTitleList[index], format: 'MM月'),
      style: TextStyle(
        color: status ? Colors.white : Colors.white70,
        fontWeight: status ? FontWeight.bold : FontWeight.normal,
        fontSize: status ? 32.sp : 28.sp,
      ),
    );
  }
}
